<template>
    <div>
<h1>康复信息列表显示界面</h1>
        <a href="/Add">新增</a>
        <br>
        <a href="https://localhost:7178/api/Rehabilitation/UpdownExcel">文件下载</a>
        姓名
       <input type="text" v-model="page.name">
        <input type="button" value="查询" @click="">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input  type="checkbox" v-model="iseel" @change="Quan">
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>状态</td>
                    <td>服务时长</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>
                        <input v-model="idlist" :value="a.id"  type="checkbox" @change="Fanx">
                    </td>
                    <td>{{a.rId}}</td>
                    <td>{{a.name}}</td>
                    <td>{{a.type?"启用":"停用"}}</td>
                    <td>{{a.playTime}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="DeletType(a.id)">
                        
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="FenY(1)">
        <input type="button" value="上一页" @click="FenY(2)">
        <input type="button" value="下一页" @click="FenY(3)">
        <input type="button" value="尾页" @click="FenY(4)">
        一共{{  pagecount.pcount}}页,一共{{ pagecount.count }}条,当前第{{ page.index }}页,每页{{  page.size}}条
        <input type="button" value="批量修改启用/禁用" @click="UpdateType">
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';

onMounted(()=>{
    Show();
})

//保存选多个编号(反选下)
const idlist=ref<Number[]>([]);


//(全选)上
const iseel=ref(false);

//全选
const Quan=()=>{
    if(iseel.value){
        data.value.forEach(x=>{
            idlist.value.push(x.id);
        })
    }else{
        idlist.value=[];
    }
}

//反选
const Fanx=()=>{
    if(idlist.value.length==data.value.length){
        iseel.value=true;
    }else{
        iseel.value=false;
    }
}



//批量修改
const UpdateType=()=>{
    axios.get("https://localhost:7178/api/Rehabilitation/UpdateType",{params:{isiding:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('状态修改成功');
            Show();
        }else{
            alert('状态修改失败..');
        }
    })
}

const data=ref([{
    "id": 0,
      "rId": "",
      "name": "",
      "isDeleted": false,
      "type": false,
      "playTime": 0
}])

const page=ref({
    name:"",
    index:1,
    size:3,
})

const pagecount=ref({
    count:0,
    pcount:0,
})

//分页
const FenY=(s:any)=>{
    if(s==1){
        page.value.index=1;
        Show();
    }
    if(s==2){
        if(page.value.index>1){
            page.value.index-=1;
            Show();
        }
    }
    if(s==3){
        if(page.value.index<pagecount.value.pcount){
            page.value.index+=1;
            Show();
        }
    }
    if(s==4){
        page.value.index=pagecount.value.pcount;
        Show();
    }
}


//显示
const Show=()=>{
    axios.get("https://localhost:7178/api/Rehabilitation/GetAll",{params:page.value}).then(res=>{
        data.value=res.data.data;
        pagecount.value.count=res.data.count;
        pagecount.value.pcount=Math.ceil(res.data.count/page.value.size);
    })
}

//逻辑删除
const DeletType=(vid:any)=>{
    axios.delete("https://localhost:7178/api/Rehabilitation/DeleteType",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功');
            Show();
        }else{
            alert('逻辑删除失败');
            return;
        }
    })
}

</script>

<style scoped>

</style>